<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    .container {
      width: 600px;
      height: 500px;
      margin: 50px auto 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .top {
      width: 500px;
      height: 200px;
      border: 1px solid springgreen;
      border-radius: 5px;
      text-indent: 2em;
      font-size: 16px;
      line-height: 25px;
    }

    .bottom {
      width: 500px;
      height: 200px;
      border: 1px solid springgreen;
      border-radius: 5px;
      text-indent: 2em;
      font-size: 16px;
      line-height: 25px;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="top">
      <p class="content" draggable="true">你的理想是梦；理想是远方的田野；是穿越世界的旅行，但现在你能做的所有只是，把手握紧，厚积薄发！你只有付出你的时间，赌上你的尊严，拿出你的全部，你的 everything！
        当别人打游戏时你在学习，当别人睡懒觉时你在学习！你含着泪水在深夜里舞蹈，在回忆里奔跑！没有人，在年少时想成为一个普通人！尽管生活，它会剥夺你的所爱，践踏你的尊严，把你踩在脚下，让你遍体鳞伤！但是，你，怎能，倒下？！你的身后是挚爱你的人。那些受过的伤，都将成为你的勋章，都是你送给未来的自己最好的礼物--我也有梦想啊！</p>
    </div>
    <div class="bottom"></div>
  </div>

  <script type="text/javascript">
  
    /**
     * 拖拽对象的三个对象
     * dragstart、drag、dragend
     * 拖拽对象的三个事件
     * ondragstart ------- onmousedown
     * ondrag ------------ onmousemove
     * ondragend --------- onmouseup
     * 
     * 投放区依次触发的事件
     * ondragenter、ondragover、ondragleave、ondrop
     * 
     * 该对象专门用于携带拖放过程中的数据
     * e.dataTransfer.setData(key, value)
     * e.dataTransfer.getData(key, value)
     * e.dataTransfer.setDataImage(key, value)
    */

    let current = document.querySelector('.content')
    let target = document.querySelector('.bottom')

    current.ondragstart = e => {
      // 鼠标按下触发
      console.log( 'ondragstart...', e )
      console.log( e.target.className )
      e.dataTransfer.setData('key', e.target.className)
    }

    current.ondrag = e => {
      // console.log( 'ondrag...' )
    }

    current.ondragend = e => {
      // console.log( 'ondragend...' )
    }


    // 投放区的四个事件
    target.ondragenter = e => {
      console.log( 'ondragenter...' )
    }

    target.ondragover = e => {
      // console.log( 'ondragover...' )
      // 虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的，需要阻止默认行为
      e.preventDefault()// 所有元素默认不可投放，阻止默认行为
      e.dataTransfer.dropEffect = 'move'
    }

    target.ondragleave = e => {
      console.log( 'ondragleave...' )
    }

    // 拖拽对象投放在投放区时触发
    target.ondrop = e => {
      console.log( 'ondrop...' )
      let value = e.dataTransfer.getData('key')
      console.log( value )
      target.appendChild(document.querySelector('.' + value))
    }

  </script>
</body>
</html>